<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>预支付</title>
    <link href="https://unpkg.co/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
</head>
<style>
    body {
        width: 1280px;
        height: 1024px;
        max-width: 1280px;
        max-height: 1024px;
        overflow: hidden;
    }
</style>

<body>
    <div class="layui-row">
        <fieldset class="layui-elem-field">
            <legend>系统名称--当前版本V1.0-时间2023-07-11</legend>
            <div class="layui-field-box">
                <div class="layui-col-sm12">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-panel">
                            <div style="padding: 32px;">医院LOGO+医院名称 设备编号+当前时间</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12" style="width: 500px;text-align: center;">
                    <form class="layui-form layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-form-mid layui-text-em">测试1</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-form-mid layui-text-em">男</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-form-mid layui-text-em">1岁</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出生日期</label>
                            <div class="layui-form-mid layui-text-em">2013-02-25</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">挂号科室</label>
                            <div class="layui-form-mid layui-text-em">内科1</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">医生</label>
                            <div class="layui-form-mid layui-text-em">测试医生</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">挂号费</label>
                            <div class="layui-form-mid layui-text-em">100</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">诊查费</label>
                            <div class="layui-form-mid layui-text-em">100</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">合计</label>
                            <div class="layui-form-mid layui-text-em">100</div>
                        </div>
                        <div class="layui-form-item">
                            <button type="button" id="confim" class="layui-btn">确认</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </form>
                </div>

                <div class="layui-col-sm12">
                    <div class="grid-demo grid-demo-bg1">
                        <div class="layui-panel">
                            <div style="padding: 32px;">当前设备状态+网络状态+打印机状态+报警信息+维护信息</div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</body>
<script type="text/html" id="payModel">
    <div class="layui-row">
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid">微信支付</button>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid">支付宝支付</button>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo"><button type="button"
                class="layui-btn layui-btn-primary  layui-btn-fluid">银行卡支付</button></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1"><button type="button"
                class="layui-btn layui-btn-primary  layui-btn-fluid">现金支付</button></div>
    </div>
</div>
</script>
</html>
<script src="https://unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script>
    layui.use(function () {
        var $ = layui.$;
        $("#confim").click(function(){
            layer.open({
        type: 1,
        title:'请选择支付方式',
        area: ['420px', '240px'], // 宽高
        content: $('#payModel').html()
      });
        })
       

    return false; 
  });
</script>